<!-- 多柱子柱状图 -->
<template>
  <div class="w-100 h-100">
    <fakeLenfend
      :color="colorSingleList.splice(0, props.echartsData.length)"
      :text="echartsData.map((item:any)=>item.name)"
      v-if="showFakeLenfend"
    >
    </fakeLenfend>

    <div class="w-100" style="height: 90%" :id="echartsId + 'div'">
      <div
        :id="echartsId"
        class="w-100"
        style="height: 100%; position: relative"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import fakeLenfend from "@/components/project/fakeLegend.vue";
import { useFunc } from "@/hook/useFunc";
import * as echarts from "echarts";
const props = defineProps({
  echartsData: {
    type: Array,
    default: () => [],
  },
  echartsId: {
    type: String,
    default: "",
  },
  derection: {
    type: String,
    default: "",
  },
  barWidth: {
    type: String,
    default: "60%",
  },
  xlabel: {
    type: Array<String>,
    default: () => [],
  },
  unit: {
    type: String,
    default: "个",
  },
  mouseShowLabel: {
    type: Boolean,
    default: true,
  },
  showFakeLenfend: {
    type: Boolean,
    default: true,
  },
});
const colorSingleList = [
  "rgba(3, 230, 254, 1)",
  "rgba(184, 235, 143, 1)",
  "rgba(251, 216, 160, 1)",
];

const colorList = [
  "rgba(3, 230, 254, 1)",
  "rgba(3, 230, 254, 0)",
  "rgba(184, 235, 143, 1)",
  "rgba(184, 235, 143, 0)",
  "rgba(251, 216, 160, 1)",
  "rgba(251, 216, 160, 0)",
];
let option_h = {
  grid: {
    containLabel: true, // 确保标签被完整显示
    bottom: '5%', // 调整图表位置
    left:'0%'
  },
  tooltip: {
    show: true, // 鼠标悬停时显示 tooltip
    backgroundColor: "rgba(28,64,81,0.7)",
    borderColor: "transparent",
    textStyle: {
      color: "white",
      fontSize: 20,
    },
  },
  xAxis: {
    type: "value", // 将值轴配置到X轴
    axisLabel: {
      interval: 0,
      formatter: "{value}" + props.unit,
       
    },

    splitLine: {
      show: true,
      lineStyle: {
        opacity: 0.2,
      },
    },
  },
  yAxis: {
    type: "category", // 将类别轴配置到Y轴
    data: props.echartsData.map((item: any) => item.name),
    axisLabel: {
      formatter: function (value:any) {
                // 将每个标签中的文本按每四个字符进行分割并加上换行符
                return value.match(/.{1,4}/g).join('\n');
            },
            interval: "auto", // 自动计算间隔
            minInterval: 1, // 设置最小间隔为1
    },
    splitLine: { // 配置分割线
            show: true,
            lineStyle: {
                color: 'rgba(92, 225, 255, 0.5)', // 蓝色分割线
                type: 'solid' // 实线
            }
        },

  },
};
let option_v = {
  tooltip: {
    show: true, // 鼠标悬停时显示 tooltip
    backgroundColor: "rgba(28,64,81,0.7)",
    borderColor: "transparent",
    textStyle: {
      color: "white",
      fontSize: 20,
    },
  },
  grid: {
    containLabel: true, // 确保标签被完整显示
    bottom: '5%', // 调整图表位置
  left:'0%'
  },
  yAxis: {
    name: props.unit,
    type: "value",
   

    splitLine: { // 配置分割线
            show: true,
            lineStyle: {
                color: 'rgba(92, 225, 255, 0.5)', // 蓝色分割线
                type: 'solid' // 实线
            }
        },
  },
  xAxis: {
    type: "category",
    data: props.xlabel,
    axisLabel: {
      formatter: function (value:any) {
                // 将每个标签中的文本按每四个字符进行分割并加上换行符
                return value.match(/.{1,4}/g).join('\n');
            },
            interval: "auto", // 自动计算间隔
            minInterval: 1, // 设置最小间隔为1
    },
  },
};
let myChart: any = null;
onMounted(() => {
  let optionDetection: any = {};
  props.derection === "v"
    ? (optionDetection = option_h)
    : (optionDetection = option_v);
  console.log(optionDetection, "optionDetection");
  optionDetection.series = [];
  props.echartsData.forEach((item: any, index: any) => {
    optionDetection.series.push({
      type: "bar",
      data: (props.echartsData[index] as any).value, // 示例数值数据
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: colorList[index * 2], // 顶部颜色
          },
          {
            offset: 0.01,
            color: colorList[index * 2 + 1], // 接近底部的颜色
          },
          {
            offset: 1,
            color: colorList[index * 2], // 底部颜色，透明
          },
        ]),
      },
      barWidth: props.barWidth, // 调整柱状图的宽度

      label: {
        show: false,
        position: "top", // 标签显示在柱状图顶部
        fontSize: 14, // 标签字体大小
        color: "#DEDEDE",
      },
    });
  });

  myChart = echarts.init(
    document.getElementById(props.echartsId) as HTMLElement
  );
  myChart.setOption(optionDetection);
  useFunc().setDefaultOption(myChart)
  
  var divElement = document.getElementById(props.echartsId + "div");
  if (props.mouseShowLabel) {
    // 添加鼠标移入事件监听器
    (divElement as any).addEventListener("mouseover", function (event:any) {
      var option = myChart.getOption();
      option.series.forEach(function (serie: any) {
        serie.label.show = true;
      });
      myChart.setOption(option);
      // 这里可以添加你想要执行的逻辑
    });
    (divElement as any).addEventListener("mouseout", function (event:any) {
      var option = myChart.getOption();
      option.series.forEach(function (serie: any) {
        serie.label.show = false;
      });
      myChart.setOption(option);
      // 这里可以添加你想要执行的逻辑
    });
  }
});
onBeforeUnmount(() => {
  // 销毁 ECharts 实例
  if (myChart) {
    myChart.dispose();
  }
});
</script>

<style></style>
